怎么用javascript做表格

最新推荐文章于 2024-10-01 19:00:00 发布

天刚萌萌亮

最新推荐文章于 2024-10-01 19:00:00 发布

阅读量1.5w

点赞数 7

本文链接：https://blog.csdn.net/wmeng13/article/details/81004573

版权

第一种方法：只显示怎么创建表格

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		table{width: 500px;border: 1px solid gray;border-collapse: collapse;}
		table th,table td{line-height: 30px;text-align: center;border: 1px solid gray;}
	</style>
</head>
<body>
<script type='text/javascript'>
	//1.创建表格节点对象
	var tab=document.createElement('table');
   // 2.创建标题 并添加到表格中
    var cap=document.createElement('caption');
    cap.innerHTML='员工信息表';
    tab.appendChild(cap);
    // 3.添加表头
    var tr=document.createElement('tr');
    var th1=document.createElement('th');
    th1.innerHTML='编号';
    var th2=document.createElement('th');
    th2.innerHTML='姓名';
    var th3=document.createElement('th')
    th3.innerHTML='年龄';
    var th4=document.createElement('th');
    th4.innerHTML='操作';
    // 将列添加到行内
    tr.appendChild(th1);
    tr.appendChild(th2);
    tr.appendChild(th3);
    tr.appendChild(th4);
    // 将行添加到表格中
    tab.appendChild(tr);
    // 添加表格内容
    var tb_tr1=document.createElement('tr');
    var tr1_td1=document.createElement('td');
    tr1_td1.innerHTML='1000';
    var tr1_td2=document.createElement('td');
    tr1_td2.innerHTML='jack';
    var tr1_td3=document.createElement('td');
    tr1_td3.innerHTML='20';
    var tr1_td4=document.createElement('td');
    var _link=document.createElement('a');
    _link.href='#';
    _link.innerHTML='删除';
    tr1_td4.appendChild(_link);
    //将列添加到行内
	tb_tr1.appendChild(tr1_td1);
	tb_tr1.appendChild(tr1_td2);
	tb_tr1.appendChild(tr1_td3);
	tb_tr1.appendChild(tr1_td4);
	//将行添加到表格中
	tab.appendChild(tb_tr1);
    // 将表格添加到页面中
    document.body.appendChild(tab);
</script>
</body>
</html>

第二种方法：添加、删除功能

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#box{width: 800px;margin: 30px auto;}
		table{width: 500px;border: 1px solid gray;border-collapse: collapse;margin-top: 30px;}
		table th,table td{line-height: 30px;text-align: center;border: 1px solid gray;}
	</style>
</head>
<body>
<div id="box">
	<label for="">姓名：</label><input type="text" name="" id="txt-name">
	<label for="">年龄：</label><input type="text" name="" id="txt-age">
	<label for="">住址：</label><input type="text" name="" id="txt-address">
	<button id="btnAdd">添加</button>
	<script type="text/javascript">
		//查找元素
		var o=document.getElementById('box');
		var oName=document.getElementById('txt-name');
		var oAge=document.getElementById('txt-age');
		var oAddress=document.getElementById('txt-address');
		//创建表格
		var tab=document.createElement('table');
		//添加标题
		var cap=document.createElement('caption');
		cap.innerHTML='人员信息表';
		tab.appendChild(cap);
		//添加表头
		var headTr=createTr('姓名','年龄','住址',true);
		tab.appendChild(headTr);
		//添加点击事件
		document.getElementById('btnAdd').οnclick=function(){
			//读取输入框内容
			var pName=oName.value;
			var pAge=oAge.value;
			var pAddress=oAddress.value;
			if(pName==''||pAge==''||pAddress==''){
				alert('姓名、年龄、住址均不能为空');
				return;//结束函数
			}
			//添加行
			var tr=createTr(pName,pAge,pAddress,false);
			//将行添加到表格中
			tab.appendChild(tr);
			o.appendChild(tab);//将表格显示到页面中
			//清空输入框
			oName.value='';
			oAddress.value='';
			oAge.value='';
		};
		/*
			创建行，，包含四列
			ct1,ct2,ct3分别为前三列的内容
		*/
		function createTr(ct1,ct2,ct3,isTh){
			var tr=document.createElement('tr');//创建行
			//创建列
			var td1=createTd(ct1,isTh);
			var td2=createTd(ct2,isTh);
			var td3=createTd(ct3,isTh);
			var td4=document.createElement('td');
			if(!isTh){
				var _link=document.createElement('a');//创建超链接
				_link.href='#';
				_link.innerHTML='删除';
				td4.appendChild(_link);
				td4.οnclick=function(){
					if(confirm('确认删除？')){
						this.parentNode.parentNode.removeChild(this.parentNode);
					}							
				};
			}else{
				td4.innerHTML='操作';
			}
			//将列添加到行内
			tr.appendChild(td1);
			tr.appendChild(td2);
			tr.appendChild(td3);
			tr.appendChild(td4);			
			return tr;
		}
		//创建列
		function createTd(content,isTh){
			var td;
			//isTh为真，创建th,否则，创建td
			if(isTh){
				td=document.createElement('th');
			}else{
				td=document.createElement('td');
			}
			td.innerHTML=content;
			return td;
		}
	</script>
</div>
</body>
</html>